<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; border:0;list-style:none;}
body{ font-size:14px; }
#box{ width:500px; height:300px; position:absolute; margin:50px 150px; border:1 rgba(0,0,0,1.00) solid;}
img{width:500px; height:300px; border:#000000 solid 1px; }
.show{ display:block;}
.hide{ display:none;}
#btns{ width:120px; height:20px; position:absolute; right:10px; bottom:10px; padding:2px; font-size:14px; color:#FFFFFF;}
#btns li{float:left; display:block; background-color:rgba(173,173,173,0.30); width:20px; height:20px; margin:3px; text-align:center; padding-top:2px; cursor:pointer;}
</style>
<script>
var t=setInterval('pChange()',1000);
var k=0;
function pChange(){
	var bx=document.getElementById("box");
	var imgs=bx.getElementsByTagName("img");
	var lis=bx.getElementsByTagName("li");
	for(var i=0;i<imgs.length;i++){
	if(i==k){imgs[i].className='show';lis[i].style.background='orange';}
	else {imgs[i].className='hide';lis[i].style.background='';}
	}
	k++;
	if(k>=imgs.length){k=0;}
	
}

function stopTime(){
	clearInterval(t);}
	
function starTime(){
	t=setInterval('pChange()',1000);}
function thisImg(n){
	k=n
	pChange();}
</script>
</head>

<body>
<div id="box" onMouseMove="stopTime()" onMouseOut="starTime()">
<img src="1.jpg" class="show">
<img src="2.jpg" class="hide">
<img src="3.jpg" class="hide">
<img src="4.jpg" class="hide">
<ul id="btns">
<li onClick="thisImg(0)">1</li>
<li onClick="thisImg(1)">2</li>
<li onClick="thisImg(2)">3</li>
<li onClick="thisImg(3)">4</li>
</ul>
</div>
</body>
</html>
